<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { onMounted } from "vue";
import { ref } from "vue";
import { updatePassWord } from "@/server/api/profile";
import { useUseStore } from "@/stores/user";
import { showToast } from "vant";
const useStore = useUseStore();
import {
  upToVipUserAPI,
  isVipUserAPI,
  getShopNumberAPI,
} from "@/server/api/Confirm";
import MaskOver from "@/components/JiMan/MaskOver.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const currentRate = ref(50);
const gradientColor = {
  "0%": "#FC8181",
  "100%": "#AC47FF",
};

// Application是否允许点击,false为没被禁用,true被禁用
const IsAllowClick = ref(true);
// 店铺总数
const shopSum = ref(0);
//是否为vip
const isVip = ref();

//查询有多少家店铺
const getShopNumber = async (id) => {
  const res = await getShopNumberAPI(id);
  console.log("店铺数量为", res);
  shopSum.value = res.data.data;
  if (shopSum.value > 10) {
    isVipUser(useStore.userId);
  }
};

//查询是否是vip用户
const isVipUser = async (id) => {
  const res = await isVipUserAPI(id);
  isVip.value = res.data.data;
  console.log("是否是vip用户", res);
};

//点击升级按钮事件
const upgrade = () => {
  upVip(useStore.userId);
  IsAllowClick.value = true;
};

// 将多家实体店一起升级为vip店铺接口
const upVip = async (id) => {
  const res = await upToVipUserAPI(id);
  console.log("升级", res);
};

onMounted(() => {
  // 传入的uid先写死，后面通过路由传参接收
  getShopNumber(useStore.userId);
  if (isVip.value) {
    IsAllowClick.value = false;
  }
});
const username = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const isForm = ref(false);

// 打开修改密码表单
const openForm = () => {
  isForm.value = true;
};
// 关闭修改密码表单
const closeForm = () => {
  isForm.value = false;
};
const modifyPassword = async (uid, password) => {
  const res = await updatePassWord(uid, password);
  console.log(res);
};
// 提交表单
const onSubmit = (values) => {
  console.log("submit", values);
  if (values.nPassword === values.conPassword) {
    modifyPassword(values.uid, values.conPassword);
    isForm.value = false;
    showToast(t("manageHShop.success"));
  } else {
    showToast(t("manageHShop.wrongPass"));
  }
};
</script>

<template>
  <div class="contaner-max">
    <TopButtonCenter :title="$t('me.manage.shop.title')" />
    <div class="ManageShop">
      <div class="content">
        <van-circle v-model:current-rate="currentRate" :stroke-width="80" :rate="shopSum * 10" size="220rem"
          start-position="left" :color="gradientColor" layer-color="#f5f5f5" default="">
          <div class="text">
            <div class="totel">total</div>
            <div class="sum">
              {{ shopSum }}
              /10
            </div>
          </div>
        </van-circle>
      </div>
      <p class="text-p">
        {{ $t("me.manage.tips") }}
      </p>
      <div class="modify-password">
        <div class="logo" @click="openForm">
          <img src="/images/Me/yesBz.png" alt="" />
          <h3>{{ $t('manageHShop.update') }} YESBZ {{ $t('manageHShop.password') }}</h3>
        </div>
        <MaskOver v-if="isForm" @click.self="closeForm">
          <div class="password-box">
            <van-form @submit="onSubmit">
              <van-cell-group inset>
                <van-field v-model="username" name="uid" label="uid" placeholder="uid"
                  :rules="[{ required: true, message: $t('manageHShop.name') }]" />
                <van-field v-model="newPassword" type="password" name="nPassword" label="new password"
                  placeholder="new password" :rules="[{ required: true, message: $t('manageHShop.pass') }]" />
                <van-field v-model="confirmPassword" type="password" name="conPassword" label="confirm password"
                  placeholder="confirm password" :rules="[{ required: true, message: $t('manageHShop.pass') }]" />
              </van-cell-group>
              <div style="margin: 16rem">
                <van-button round block type="primary" native-type="submit" class="submit">
                  {{ $t('manageHShop.submmit') }}
                </van-button>
              </div>
            </van-form>
            <!-- <label class="new-password">new password：</label> <input type="password" class="input-password"> -->
          </div>
        </MaskOver>
      </div>
      <footer>
        <div class="footer_button">
          <button @click="$router.push('MangeShopList')">
            {{ $t("me.manage.shop.title") }}
          </button>

          <button @click="upgrade" :class="IsAllowClick ? 'notAllow' : 'allow'" :disabled="IsAllowClick" round block
            native-type="submit">
            {{
              !IsAllowClick ? $t("me.manage.canUp") : $t("me.manage.cannotUp")
            }}
          </button>
        </div>
      </footer>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ManageShop {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .content {
    padding-top: 50rem;
    display: flex;
    justify-content: center;

    .text {
      font-size: 40rem;
      color: #cfcfcf;
      transform: translatey(60rem);

      .sum {
        color: #642e8e;
      }

      .totel {
        font-size: 16rem;
      }
    }
  }

  .text-p {
    padding: 50rem 10rem;
    font-size: 16rem;
    text-align: center;
    color: #ccc;
  }

  .modify-password {
    .logo {
      text-align: center;

      img {
        width: 130rem;
      }

      h3 {
        text-align: center;
        color: #ccc;
      }
    }

    .password-box {
      position: fixed;
      bottom: 0;
      width: 390rem;
      text-align: center;
      background-color: #fff;

      .submit {
        background-color: #642e8e;
      }

      .new-password {
        width: 80rem;
        background-color: bisque;
      }

      .input-password {
        width: 280rem;
        height: 30rem;
        border-bottom: 1rem solid #e5e5e5;
      }
    }
  }
}

footer {
  width: 100%;
  margin-top: 160rem;
  // position: absolute;
  // bottom: -30rem;
  // left: 0;

  .footer_button {
    width: 100%;
    height: 75rem;
    display: flex;
    justify-content: space-around;

    button {
      color: #fff;
      background-color: #642e8eff;
      width: 45%;
      height: 40rem;
      line-height: 40rem;
      border-radius: 20rem;
      text-align: center;
      border: 1rem solid;

      &:hover {
        color: #fff;
        background-color: #642e8eff;
      }
    }
  }
}

// 不允许点击Application，背景色改变
.notAllow {
  background-color: gray !important;
}

.allow {
  background-color: #642e8eff !important;
}
</style>
